<template>
  <SignLogin v-show="!getDoctorInfo.address" />

  <PageWrapper v-if="getDoctorInfo.address" content-class="!m-0">
    <div class="relative h-screen overflow-y-auto pb-12">
      <img class="w-full h-auto" :src="getDoctorInfo.pdfImg" />

      <div class="fixed bottom-0 z-2 w-full">
        <Button type="primary" black class="w-full h-12" @click="handleSubmitSign">
          已知晓，去签署合同
        </Button>
      </div>
    </div>
  </PageWrapper>
  <div id="launch-btn"></div>
</template>

<script lang="ts" setup>
  import { PageWrapper } from '@/components/Page';
  import { onMounted, toRefs, unref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useMessage } from '@/hooks/web/useMessage';
  import SignLogin from './sign-login/index.vue';
  import { useDoctorStore } from '@/store/modules/signature';
  import { docGetFaceToken, getWechatMpJsConfig } from '@/api/public';
  import { Button } from 'ant-design-vue';
  import wx from 'weixin-js-sdk';

  onMounted(() => {
    getWechatMpJsConfig().then((res) => {
      // const {
      //   appId = 'wx2a6608e84e7cc4a3',
      //   timestamp = 1724400041,
      //   nonceStr = 'Wm3WZYTPz0wzccnW',
      //   signature = '992d1d2ca4625219d2ca795a49eb6789e2fd3c55',
      // } = {};
      const { appId = '', timestamp = '', nonceStr = '', signature = '' } = res || {};

      wx.config({
        debug: true,
        appId,
        timestamp,
        nonceStr,
        signature,
        jsApiList: [],
      });
    });
  });

  const router = useRouter();
  const doctorStore = useDoctorStore();
  const { getDoctorInfo } = toRefs(doctorStore);
  const { createConfirm } = useMessage();

  async function handleSubmitSign() {
    createConfirm({
      iconType: 'info',
      title: '提示',
      content: '即将前往人脸实名认证，认证通过后会自动签署合同请确定。',
      onOk() {
        wx.ready(async () => {
          const { doctorName, doctorIdentity } = unref(getDoctorInfo) || {};
          const faceToken = await docGetFaceToken({
            username: doctorName,
            identity: doctorIdentity,
          });

          // @ts-ignore
          wx.miniProgram.navigateBack({ delta: 1 });

          wx.miniProgram.postMessage({
            data: {
              fn: 'FaceSale',
              body: faceToken,
            },
          });
        });
      },
    });
  }
</script>

<style lang="less" scoped>
  ::v-deep(.pdf-view) {
    padding-top: 0;

    &-canvas {
      padding-top: 0;
    }

    canvas {
      width: 100%;
    }
  }
</style>
